<!--********************************************************************
* Copyright© 2000 - 2020 SuperMap Software Co.Ltd. All rights reserved.
*********************************************************************-->
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>地图常用方法</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .btns {
            position: absolute;
            left: 10px;
            top: 10px;
            z-index: 10;
        }
    </style>
</head>

<body>
    <iframe id="mapFrame" src="" frameborder="0" style="width: 100vw;height: 100vh;"></iframe>
    <div class="btns">
    </div>
</body>
<script type="text/javascript">
    // 初始化配置 和 样式配置
    // 可以注销 和 打开相关配置，查看变化效果
    document.getElementById('mapFrame').src = '../../map/index.html?name=澄江街道';
    window.$Config = {
        mapConfig: {
            useMask: '0'
        }
    }

    var mapWindow, lwmap, mapApp;
    window.mapLoaded = function (w, m, a) {
        mapWindow = w;
        lwmap = m;
        mapApp = a;
        addMarkers();
    };

    function handleMarkerClick(point) {
        var html = 
	  	`<div class="getMapPositionClass">
			<div class="title">标题</div>
			<div class="content">
				${point.id}
			</div>
		</div>`;
      lwmap.showInfoWindow(html, point.position)
      lwmap.setCenterAndZoom(point.position, 16)
    }

    function addMarkers() {
        // 加单个marker
        var point = {
            id: 'testid',
            position: [120.277266, 31.900939]
        }
        // 参数： id， 图标， 经纬度， 图标大小， 图标定位点位置 点击方法 额外参数(一般lwType就写死 activity, 其他参数通AMap Marker， 通过赛参数的方法可以做一些特殊的事情)
        lwmap.addMarker(point.id, `./static/imgs/map/chuzuhu.png`, point.position, [26, 26], [13, 13], handleMarkerClick
            .bind(this, point), {
                lwType: 'activity',
                zIndex: 300,
                clz: 'wrj'
            });
    }
</script>

</html>